<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生态环境</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      /* 保证内容高度小于视口时也能填充整个视口 */
    }

    header {
      text-align: center;
      padding: 20px;
      background-color: #4CAF50;
      color: white;
      font-size: 24px;
    }

    section {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    article {
      flex: 1;
      margin: 10px;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease-in-out;
    }

    article:hover {
      transform: scale(1.05);
    }

    h2 {
      color: #4CAF50;
    }

    p {
      line-height: 1.6;
    }

    .environment-image {
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 20px 0;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .environment-data {
      background-color: #f9f9f9;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .environment-data ul {
      padding-left: 20px;
    }

    .interaction-list {
      list-style: none;
      padding: 0;
    }

    .interaction-list li {
      margin-bottom: 8px;
    }

    footer {
      text-align: center;
      padding: 10px;
      background-color: #333;
      color: white;
      margin-top: auto;
      /* 推动footer到底部 */
    }

    .cta-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease-in-out;
      cursor: pointer;
      transform: translate(120px, 60px);
    }

    .cta-button:hover {
      background-color: #45a049;
    }
  </style>
</head>

<body>
  <header>
    生态环境信息
  </header>

  <section>
    <article>
      <h2>生态环境简介</h2>
      <p>
        本页面旨在提供关于我们周围环境的详细信息。我们深知生态环境的健康对社会和生活至关重要。通过这个页面，我们希望能够唤起大家对环保的关注和参与。
      </p>
      <img class="environment-image" src="../assets/2.jpg" alt="生态环境图片">
    </article>

    <article>
      <h2>环境保护措施</h2>
      <p>
        我们致力于采取各种措施来保护生态环境。这包括减少污染、提倡可持续发展，以及积极参与濒危物种的保护工作。我们相信每个人的努力都对环境的未来产生积极的影响。
      </p>
      <img class="environment-image" src="../assets/bdlg1.jpg" alt="生态环境图片">
    </article>

    <article>
      <h2>生态环境图片</h2>
      <p>
        以下是一些展示我们美丽生态环境的照片：
      </p>
      <img class="environment-image" src="../assets/R.jpg" alt="生态环境图片">
      <img class="environment-image" src="../assets/R1.jpg" alt="生态环境图片">
    </article>

    <article class="environment-data">
      <h2>环境数据</h2>
      <p>
        我们持续监测环境数据，以确保生态系统的健康。最近的数据显示：
      </p>
      <ul>
        <li>空气质量：良好</li>
        <li>水质：优秀</li>
        <li>土壤健康：良好</li>
      </ul>
      <img class="environment-image" src="../assets/44.jpg" alt="生态环境图片">
    </article>

    <article>
      <h2>生态保护互动</h2>
      <p>
        为了更好地保护我们的环境，我们邀请你一起参与以下互动活动：
      </p>
      <ul class="interaction-list">
        <li>参与植树活动</li>
        <li>减少塑料使用</li>
        <li>支持可持续发展项目</li>
      </ul>
      <a class="cta-button" href="#get-involved">立即参与</a>
    </article>
  </section>

  <footer>
    &copy; 2023 生态环境保护组织
  </footer>
  <script>
    document.querySelector('.cta-button').addEventListener('click', () => {
      alert('生态保护靠大家！')
    })
  </script>
</body>